<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/statics/css/sapar.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/common.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath }/statics/js/jquery.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/statics/js/sapar.js"></script>
<link
	href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css"
	rel="stylesheet" />
<!--演示页面样式，使用时可以不引用-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/demo.css" />
<!--必要样式-->
<link
	href="${pageContext.request.contextPath }/statics/css/component-chosen.css"
	rel="stylesheet" />
<title>发送短信</title>
</head>
<body>
	<div id="saper-container">
		<div id="saper-hd"></div>
		<div id="saper-bd">
			<div class="subfiled clearfix">
				<h2>发送短信</h2>
			</div>
			<div class="subfiled-content">
				<form action="${pageContext.request.contextPath }/sendSms.do"
					method="post">
					<div class="kv-item clearfix">
						<label>接收人：</label>
						<div class="kv-item-content">
							<select id="optgroup_clickable"
								class="form-control form-control-chosen-optgroup"
								title="clickable_optgroup" data-placeholder="接收人" multiple>
								<optgroup label="大客户">
									<option value="18138435547">李晓沫</option>
								</optgroup>
								<optgroup label="散户">
									<option value="18138435547">谭小华</option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="kv-item clearfix">
						<label>接收号码：</label>
						<div class="kv-item-content">
							<input type="text" placeholder="接受号码" name="smsMob" id="smsMob" />
						</div>
						<div class="kv-item-tip">多个号码之间，用“，”隔开</div>
					</div>

					<div class="kv-item clearfix">
						<label>短信内容：</label>
						<div class="kv-item-content">
							<select id="smsModel">
								<option>选择短信模板</option>
								<option>模板1</option>
								<option>模板2</option>
							</select>
							<textarea style="margin-top: 5px;" name="smsContent" id="smsContent"></textarea>
							<!-- <p>
								当前字符<span class="brand-danger">4</span>个，超过<span
									class="brand-danger">70</span>个字拆分，共拆分<span
									class="brand-danger">1</span>条发送
							</p> -->
						</div>
						<div class="kv-item-tip">可以选择一个模板，然后修改模板内容发送</div>
					</div>
					<div style="position: absolute; left: 100px">
						<input type="submit" value="发送" class="btn btn-primary" /> <input
							type="reset" value="重置" class="btn btn-primary" />
					</div>
				</form>
			</div>
		</div>
		<div id="saper-ft"></div>
	</div>

	<script type="text/javascript">
		$('select').iSelect();
	</script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/statics/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/statics/js/chosen.jquery.js"></script>
	<script type="text/javascript">
		$("#optgroup_clickable").change(function() {
			var smsMob = $("#smsMob").val("18138435547");
		});
		
		$("#smsModel").change(function() {
			var smsContent = $("#smsContent").val("尊敬的用户，您好，感谢你使用好易修门店管理系统！");
		});

		$('.form-control-chosen').chosen({
			allow_single_deselect : true,
			width : '100%'
		});
		$('.form-control-chosen-required').chosen({
			allow_single_deselect : false,
			width : '100%'
		});
		$('.form-control-chosen-search-threshold-100').chosen({
			allow_single_deselect : true,
			disable_search_threshold : 100,
			width : '100%'
		});
		$('.form-control-chosen-optgroup').chosen({
			width : '100%'
		});

		$(function() {
			fff
			$('[title="clickable_optgroup"]').addClass(
					'chosen-container-optgroup-clickable');
		});
		$(document)
				.on(
						'click',
						'[title="clickable_optgroup"] .group-result',
						function() {
							var unselected = $(this).nextUntil('.group-result')
									.not('.result-selected');
							if (unselected.length) {
								unselected.trigger('mouseup');
							} else {
								$(this)
										.nextUntil('.group-result')
										.each(
												function() {
													$(
															'a.search-choice-close[data-option-array-index="'
																	+ $(this)
																			.data(
																					'option-array-index')
																	+ '"]')
															.trigger('click');
												});
							}
						});
	</script>
</body>
</html>